<!--
 * @Description: 查询
 * @Author: youzi
 * @Date: 2020-05-20 09:35:34
 * @LastEditors: youzi
 * @LastEditTime: 2020-09-15 10:45:02
--> 

<template>
  <div id="advanced-search">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
      <a-row :gutter="12">
        <a-col :span="20">
          <a-row>
            <a-col :span="8" v-for="(item, index) in formItem" :key="index">
              <a-form-item v-bind="formItemLayout" :label="item.label">
                <a-input size="small" style="width:100%;" v-decorator="[item.decorator]" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4" :style="{ textAlign: 'right', marginTop: '8px' }">
          <a-button class="smaller-btn" type="primary" html-type="submit">
            查询
          </a-button>
          <a-button class="smaller-btn" :style="{}" @click="handleReset">
            清空
          </a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 }
};
import { filterInputData } from 'utils/common';
import formItem from './search-data';
// import { PLAN_STATUS_VALUE_SEARCH as status } from 'utils/business-enum';
import moment from 'moment';
// import selectSearch from '~/select-search/select-search';

export default {
  name: 'searchView',
  components: {},
  data() {
    return {
      // status: status.slice(),
      employee: [],
      formItemLayout,
      formItem,
      form: this.$form.createForm(this),
      endOpen: false
    };
  },
  props: {
    /* employee: {
      type: Array,
      default: () => []
    } */
  },
  computed: {
    /* planLevel() {
      return this.$store.state.dict.PLAN_LEVEL;
    },
    project() {
      return this.$store.state.dict.PROJECT;
    } */
  },
  created() {
    /* 组件复用的原因，不知道会不会出bug，预留reset表单方法 */
    // this.form.resetFields();
  },
  mounted() {
    // this.getEmployee();
    // this.renderSelection();
  },
  watch: {
    /* planLevel(val) {
      this.renderSelection('planLevel');
    },
    project(val) {
      this.renderSelection('project');
    } */
  },
  methods: {
    /* getEmployee() {
      this.$post(this.apiURL.getBottomTitle, {})
        .then(r => {
          let data = r.data.data;
          this.employee = data;
          this.renderSelection('employee');
        })
        .catch(err => {
          console.error(err);
        });
    }, */
    /**
     * @desc: 渲染selection
     * @author: youzi
     */
    renderSelection(name = '') {
      // debugger;
      try {
        if (!name) {
          this.formItem.forEach(el => {
            if (el.type === 'selection') {
              el.options = this[el.decorator];
            }
          });
        } else {
          this.formItem.forEach(el => {
            if (el.type === 'selection' && el.decorator === name) {
              el.options = this[el.decorator];
              throw new Error('found');
            }
          });
        }
      } catch (error) {}
    },
    // 时间日期选择相关函数
    disabledStartDate(startValue) {
      const endValue = this.form.getFieldValue('planCompletionTimeEnd');
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.form.getFieldValue('planCompletionTimeStart');
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    /**
     * @desc: 查询函数，触发父组件的查询方法
     * @param {event} e 事件参数
     * @author: youzi
     */
    handleSearch(e) {
      if (e) {
        e.preventDefault();
      }
      this.form.validateFields((error, values) => {
        // 用户输入的数据先做校验再传给后端
        if (error) {
          return;
        }
        let tmpObj = {};
        Object.keys(values).forEach(key => {
          if (filterInputData(values[key])) {
            if (typeof values[key] === 'string') {
              tmpObj[key] = values[key].trim();
            } else {
              tmpObj[key] = values[key];
            }
            // 对时间格式特殊化处理
            if (key.includes('Time')) {
              tmpObj[key] = values[key].format('YYYY-MM-DD');
            }
          }
        });
        this.$emit('search', tmpObj);
      });
    },
    /**
     * @desc: 导出函数，触发父组件的导出函数
     * @author: youzi
     */
    exportFile() {
      this.form.validateFields((error, values) => {
        if (error) {
          return;
        }
        let tmpObj = {};
        Object.keys(values).forEach(key => {
          if (filterInputData(values[key])) {
            if (typeof values[key] === 'string') {
              tmpObj[key] = values[key].trim();
            } else {
              tmpObj[key] = values[key];
            }
            // 对时间格式特殊化处理
            if (key.includes('Time')) {
              tmpObj[key] = values[key].format('YYYY-MM-DD');
            }
          }
        });
        this.$emit('exportFile', tmpObj);
      });
    },
    /**
     * @desc: 重置表单
     * @author: youzi
     */
    handleReset() {
      this.form.resetFields();
      this.handleSearch();
      this.$message.success('已清空表单！');
    }
  }
};
</script>
<style lang="less">
.ant-calendar {
  .ant-calendar-ok-btn {
    color: #fff !important;
  }
  .ant-calendar-ok-btn-disabled {
    color: #1890ff !important;
  }
}
.ant-advanced-search-form {
  /* background: #fbfbfb; */
  /* border: 1px solid #d9d9d9; */
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
  margin-bottom: 0 !important;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#advanced-search .ant-form {
  max-width: none;
}
#advanced-search {
  @height: 24px;
}
</style>
